    <style include="cr-shared-style cr-icons">
      :host {
        align-items: center;
        display: flex;
        height: 40px;
        transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
            width 150ms cubic-bezier(0.4, 0, 0.2, 1);
        width: 44px;
      }

      :host([disabled]) {
        opacity: var(--cr-disabled-opacity);
      }

      [hidden] {
        display: none !important;
      }

      cr-icon-button {
        --cr-icon-button-size: var(--cr-toolbar-icon-container-size, 32px);
        margin: var(--cr-toolbar-icon-margin, 6px);
      }

      :host-context([chrome-refresh-2023]) cr-icon-button {
        --cr-icon-button-fill-color: var(--cr-toolbar-search-field-icon-color,
            var(--color-toolbar-search-field-icon,
            var(--cr-secondary-text-color)));
        --cr-icon-button-size: var(--cr-toolbar-icon-container-size, 28px);
        --cr-icon-button-icon-size: 20px;
        margin: var(--cr-toolbar-icon-margin, 0);
      }

      @media (prefers-color-scheme: light) {
        cr-icon-button {
          --cr-icon-button-fill-color: var(
              --cr-toolbar-search-field-input-icon-color,
              var(--google-grey-700));
          --cr-icon-button-focus-outline-color: var(
              --cr-toolbar-icon-button-focus-outline-color,
              var(--cr-focus-outline-color));
        }
      }

      @media (prefers-color-scheme: dark) {
        cr-icon-button {
          --cr-icon-button-fill-color: var(
              --cr-toolbar-search-field-input-icon-color,
              var(--google-grey-500));
        }
      }

      #icon {
        transition: margin 150ms, opacity 200ms;
      }

      #prompt {
        color: var(--cr-toolbar-search-field-prompt-color,
            var(--google-grey-700));
        opacity: 0;
      }

      @media (prefers-color-scheme: dark) {
        #prompt {
          color: var(--cr-toolbar-search-field-prompt-color, white);
        }
      }

      @media (prefers-color-scheme: dark) {
        #prompt {
          --cr-toolbar-search-field-prompt-opacity: 1;
          color: var(--cr-secondary-text-color, white);
        }
      }

      :host-context([chrome-refresh-2023]) #prompt {
        color: var(--cr-toolbar-search-field-prompt-color,
            var(--color-toolbar-search-field-foreground-placeholder,
            var(--cr-secondary-text-color)));
      }

      paper-spinner-lite {
        --paper-spinner-color:
            var(--cr-toolbar-search-field-input-icon-color,
                var(--google-grey-700));
        height: var(--cr-icon-size);
        margin: var(--cr-toolbar-search-field-paper-spinner-margin, 0 6px);
        opacity: 0;
        padding: 6px;
        position: absolute;
        width: var(--cr-icon-size);
      }

      @media (prefers-color-scheme: dark) {
        paper-spinner-lite {
          --paper-spinner-color: var(
              --cr-toolbar-search-field-input-icon-color, white);
        }
      }

      paper-spinner-lite[active] {
        opacity: 1;
      }

      #prompt,
      paper-spinner-lite {
        transition: opacity 200ms;
      }

      /* Input field. */
      #searchTerm {
        -webkit-font-smoothing: antialiased;
        flex: 1;
        line-height: 185%;
        margin: var(--cr-toolbar-search-field-term-margin, 0 2px);
        position: relative;
      }

      :host-context([chrome-refresh-2023]) #searchTerm {
        margin: var(--cr-toolbar-search-field-term-margin, 0);
      }

      label {
        bottom: 0;
        cursor: var(--cr-toolbar-search-field-cursor, text);
        left: 0;
        overflow: hidden;
        position: absolute;
        right: 0;
        top: 0;
        white-space: nowrap;
      }

      :host([has-search-text]) label {
        visibility: hidden;
      }

      input {
        -webkit-appearance: none;
        background: transparent;
        border: none;
        caret-color: var(--cr-toolbar-search-field-input-caret-color,
            var(--google-blue-700));
        color: var(--cr-toolbar-search-field-input-text-color,
            var(--google-grey-900));
        cursor: var(--cr-toolbar-search-field-cursor, text);
        font: inherit;
        outline: none;
        padding: 0;
        position: relative;
        width: 100%;
      }

      @media (prefers-color-scheme: dark) {
        input {
          color: var(--cr-toolbar-search-field-input-text-color, white);
        }
      }

      :host-context([chrome-refresh-2023]) input {
        caret-color: var(--cr-toolbar-serch-field-input-caret-color,
            currentColor);
        color: var(--cr-toolbar-search-field-input-text-color,
            var(--color-toolbar-search-field-foreground,
            var(--cr-fallback-color-on-surface)));
        font-size: 12px;
        font-weight: 500;
      }

      input[type='search']::-webkit-search-cancel-button {
        display: none;
      }

      :host([narrow]) {
        border-radius:
            var(--cr-toolbar-search-field-border-radius, 0);
      }

      /** Wide layout. */
      :host(:not([narrow])) {
        background:
            var(--cr-toolbar-search-field-background, var(--google-grey-100));
        border-radius:
            var(--cr-toolbar-search-field-border-radius, 46px);
        cursor: var(--cr-toolbar-search-field-cursor, text);
        max-width: var(--cr-toolbar-field-max-width, none);
        padding-inline-end: 0;
        width: var(--cr-toolbar-field-width, 680px);
      }

      @media (prefers-color-scheme: dark) {
        :host(:not([narrow])) {
          background:
              var(--cr-toolbar-search-field-background, rgba(0, 0, 0, 0.22));
        }
      }

      :host-context([chrome-refresh-2023]):host(:not([narrow])) {
        background: none;
        border-radius: 100px;
        height: 36px;
        overflow: hidden;
        padding: 0 6px;
        position: relative;
      }

      #background,
      #stateBackground {
        display: none;
      }

      :host-context([chrome-refresh-2023]):host(:not([narrow])) #background {
        background: var(--cr-toolbar-search-field-background,
            var(--color-toolbar-search-field-background,
            var(--cr-fallback-color-surface)));
        border: 2px solid transparent;
        border-radius: inherit;
        display: block;
        inset: 0;
        pointer-events: none;
        position: absolute;
        z-index: -1;
      }

      :host-context([chrome-refresh-2023].focus-outline-visible):host(
            [search-focused_]:not([narrow])) {
        outline: 2px solid var(--cr-focus-outline-color);
      }

      :host-context([chrome-refresh-2023].focus-outline-visible):host(
            [search-focused_]:not([narrow])) #background {
        background-clip: padding-box;
      }

      :host-context([chrome-refresh-2023]) #stateBackground {
        display: block;
        inset: 0;
        pointer-events: none;
        position: absolute;
      }

      :host-context([chrome-refresh-2023]):host(:hover) #stateBackground {
        background: var(--color-toolbar-search-field-background-hover,
            var(--cr-hover-background-color));
      }

      :host(:not([narrow]):not([showing-search])) #icon {
        opacity: var(--cr-toolbar-search-field-icon-opacity, .7);
      }

      :host(:not([narrow])) #prompt {
        opacity: var(--cr-toolbar-search-field-prompt-opacity, 1);
      }

      :host([narrow]) #prompt {
        opacity: var(--cr-toolbar-search-field-narrow-mode-prompt-opacity, 0);
      }

      :host([narrow]:not([showing-search])) #searchTerm {
        display: none;
      }

      /* Search open. */
      :host([showing-search][spinner-active]) #icon {
        opacity: 0;
      }

      :host([narrow][showing-search]) {
        width: 100%;
      }

      :host([narrow][showing-search]) #icon,
      :host([narrow][showing-search]) paper-spinner-lite {
        /* 18px to line up with the Menu icon by default. */
        margin-inline-start:
            var(--cr-toolbar-search-icon-margin-inline-start, 18px);
      }

      paper-ripple {
        display: none;
      }

      :host-context([chrome-refresh-2023]):host paper-ripple {
        color: var(--color-toolbar-search-field-background-pressed,
            var(--cr-active-background-color));
        display: block;
        --paper-ripple-opacity: 1;
      }
    </style>
    <div id="background"></div>
    <div id="stateBackground"></div>
    <template is="dom-if" id="spinnerTemplate">
      <paper-spinner-lite active="[[isSpinnerShown_]]">
      </paper-spinner-lite>
    </template>
    <cr-icon-button id="icon" iron-icon="cr:search" title="[[label]]" dir="ltr"
        tabindex$="[[computeIconTabIndex_(narrow, hasSearchText)]]"
        aria-hidden$="[[computeIconAriaHidden_(narrow, hasSearchText)]]"
        on-click="onSearchIconClicked_" disabled="[[disabled]]">
    </cr-icon-button>
    <div id="searchTerm">
      <label id="prompt" for="searchInput" aria-hidden="true">[[label]]</label>
      <input id="searchInput"
          aria-labelledby="prompt"
          autocapitalize="off"
          autocomplete="off"
          type="search"
          on-input="onSearchTermInput"
          on-search="onSearchTermSearch"
          on-keydown="onSearchTermKeydown_"
          on-focus="onInputFocus_"
          on-blur="onInputBlur_"
          autofocus$="[[autofocus]]"
          spellcheck="false"
          disabled="[[disabled]]">
    </div>
    <template is="dom-if" if="[[hasSearchText]]">
      <cr-icon-button id="clearSearch" iron-icon="cr:cancel"
          title="[[clearLabel]]" on-click="clearSearch_"
          disabled="[[disabled]]"></cr-icon-button>
    </template>
